<template>
    <div v-if="state.open">
        <a-modal style="width: 750px;top:20px" v-model:open="state.open" @ok="handleOk" :closable="false">
            <a-row class="add-chart-theme-color" :gutter="15">
                <a-col :span="15" class="left">
                    <template v-if="selectColorId"></template>
                    <a-empty v-else/>
                    <div class="divider">
                        <a-steps
                            progress-dot
                            :current="1"
                            direction="vertical"
                            :items="[
                                {
                                    title: '',
                                    description: '',
                                },
                                {
                                    title: '',
                                    description: '',
                                }
                            ]"
                        ></a-steps>
                    </div>
                </a-col>
                <a-col :span="9"  class="right">
                    <a-button @click="createColor" :icon="h(PlusOutlined)" style="width: 100%;" type="primary" ghost>创建</a-button>
                    <a-divider/>
                    <div class="right-empty text-center">
                        <span>暂无自定义颜色,<span @click="createColor" style="color:cadetblue;cursor: pointer;">点击创建</span></span>
                    </div>
                </a-col>
            </a-row>
        </a-modal>
        <a-modal v-model:open="state.isClose" style="width: 400px;" title="提示" @ok="handleOk2">
            <p>当前有变动未保存，是否放弃修改？</p>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import { getUUID } from '@/utils';
import { PlusOutlined } from '@ant-design/icons-vue';
import { computed, h, reactive, ref } from 'vue';
import { useDataViewStore } from '@/stores/dataview';
import type { ColorType } from './type';
import { cloneDeep } from 'lodash';

const dataviewStore = useDataViewStore()

// 默认颜色组
const defaultColor: ColorType = {
    id: getUUID(),
    name: '未命名',
    color: ['#6ae5bb', '#69e3de', '#5ac5ee', '#5ac4ee', '#4498ec', '#3c7ddf']
}

// 颜色列表
let colorList = reactive<Array<ColorType>>(dataviewStore.getEditCanvasConfig.chartCustomThemeColorInfo || [])
// 子组件更新过的数据
const updateColor = ref<ColorType | undefined>(undefined)
// 所选颜色
const selectColor = reactive<{
    selectInfo: ColorType | undefined
}>({
    selectInfo: colorList[0]
})



const state = reactive({
    open:false,
    isClose:false
})

const selectColorId = computed(()=>{
    return selectColor.selectInfo?.id
})

const handleClose = () => {
    state.open = false;
}

const handleOk = ()=>{
    handleClose()
}

const handleOpen = () => {
    state.open = true;
}

const selectHandle = (item:ColorType)=>{
    if(item.id == selectColorId.value) return
}

const create = ()=>{
    const newData = {...cloneDeep(defaultColor),id:getUUID()}
    selectColor.selectInfo = newData
    colorList.push(newData)
    
}
const createColor = ()=>{
    if(updateColor.value != undefined){
        state.isClose = true
    }else{
        create()
    }
}
const handleOk2 = ()=>{
    updateColor.value = undefined
    create()
    state.isClose = false
}
defineExpose({
    handleOpen
})
</script>

<style lang='scss' scoped>
.add-chart-theme-color{
    height: 650px;
    position: relative;
    :deep(.ant-empty){
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .divider{
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        // width: 2px;
        // background-color: #333;
        // border-radius: 5px;
        // display: flex;
        // flex-direction: column;
        // justify-content: space-between;
        .top-circle,.bottom-circle{
            width: 12px;
            height: 12px;
            background-color: #333;
            border-radius: 50%;
            transform: translateX(-50%);
            border:2px solid rgb(56, 137, 197);
        }
        :deep(.ant-steps){
            height: 100%;
            .ant-steps-item{
                &:first-child{
                    height: 100%;
                }
            }
        }
    }
}
</style>